<script setup>
import Versions from '@renderer/components/Versions.vue'

let socket = new WebSocket('ws://localhost:9527')
socket.onopen = function () {
  socket.send('onopen')
}
socket.onmessage = function (e) {
  console.log(e.data)
}

const showDialog = () => {
  window.electron.ipcRenderer.send('show-dialog', 'ipcRenderer --->ipcMain')
}

const hide = () => {}

// let isDown = false // 鼠标状态
// let baseX = 0,
//   baseY = 0 //监听坐标
// const mousedown = (e) => {
//   isDown = true
//   baseX = e.x
//   baseY = e.y
// }
// const mousemove = (e) => {
//   if (isDown) {
//     const x = e.screenX - baseX
//     const y = e.screenY - baseY
//     window.electron.ipcRenderer.send('move-application', {
//       posX: x,
//       posY: y
//     })
//   }
// }
// const mouseup = () => {
//   isDown = false
// }
</script>

<template>
  <!-- <div class="header text-white" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup">123</div> -->
  <div class="header text-white">
    <button @click="hide">123</button>
  </div>

  <Versions></Versions>

  <button @click="showDialog">showDialog</button>

  <svg class="hero-logo" viewBox="0 0 900 300">
    <use xlink:href="@renderer/assets/icons.svg#electron" />
  </svg>
  <h2 class="hero-text">You've successfully created an Electron project with Vue</h2>
  <p class="hero-tagline">Please try pressing <code>F12</code> to open the devTool</p>

  <div class="links">
    <div class="link-item">
      <a target="_blank" href="https://electron-vite.org">Documentation</a>
    </div>
    <div class="link-item link-dot">•</div>
    <div class="link-item">
      <a target="_blank" href="https://github.com/alex8088/electron-vite">Getting Help</a>
    </div>
    <div class="link-item link-dot">•</div>
    <div class="link-item">
      <a
        target="_blank"
        href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron"
      >
        create-electron
      </a>
    </div>
  </div>

  <div class="features">
    <div class="feature-item">
      <article>
        <h2 class="title">Configuring</h2>
        <p class="detail">
          Config with <span>electron.vite.config.js</span> and refer to the
          <a target="_blank" href="https://electron-vite.org/config">config guide</a>.
        </p>
      </article>
    </div>
    <div class="feature-item">
      <article>
        <h2 class="title">HMR</h2>
        <p class="detail">
          Edit <span>src/renderer</span> files to test HMR. See
          <a target="_blank" href="https://electron-vite.org/guide/hmr.html">docs</a>.
        </p>
      </article>
    </div>
    <div class="feature-item">
      <article>
        <h2 class="title">Hot Reloading</h2>
        <p class="detail">
          Run <span>'electron-vite dev --watch'</span> to enable. See
          <a target="_blank" href="https://electron-vite.org/guide/hot-reloading.html">docs</a>.
        </p>
      </article>
    </div>
    <div class="feature-item">
      <article>
        <h2 class="title">Debugging</h2>
        <p class="detail">
          Check out <span>.vscode/launch.json</span>. See
          <a target="_blank" href="https://electron-vite.org/guide/debugging.html">docs</a>.
        </p>
      </article>
    </div>
    <div class="feature-item">
      <article>
        <h2 class="title">Source Code Protection</h2>
        <p class="detail">
          Supported via built-in plugin <span>bytecodePlugin</span>. See
          <a target="_blank" href="https://electron-vite.org/guide/source-code-protection.html">
            docs
          </a>
          .
        </p>
      </article>
    </div>
    <div class="feature-item">
      <article>
        <h2 class="title">Packaging</h2>
        <p class="detail">
          Use
          <a target="_blank" href="https://www.electron.build">electron-builder</a>
          and pre-configured to pack your app.
        </p>
      </article>
    </div>
  </div>
</template>

<style lang="less">
@import '@renderer/assets/css/styles.less';
.header {
  -webkit-app-region: drag;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  // cursor: move;
}
</style>
